<template>
  <div class="avue-wang-editor" :class="{'is-focus':editorFocus}" style="">

    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <Editor
        style="height: 300px; overflow-y: hidden;"
        v-model="text"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
        @onFocus="editorOnFocus"
        @onBlur="editorOnBlur"

    />
  </div>

</template>
<script>
import '@wangeditor/editor/dist/css/style.css'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import props from "components/avue/core/common/props";
import event from "components/avue/core/common/event";
import startFileTools from "@/mixins/startFileTools";
import {getAsVal} from "components/avue/utils/util";

export default {
  name: 'avue-wang-editor',
  mixins: [props(), event()],
  components: {Editor, Toolbar},
  props: {
    videoMaxSize: {
      type: [String, Number],
      default: "20MB"
    },
    imageMaxSize: {
      type: [String, Number],
      default: "1MB"
    },
    fileMaxSize: {
      type: [String, Number],
      default: "5MB"
    },
    headers: {
      type: Object,
      default: () => {
        return {}
      }
    },
    editorConfig: {
      type: Object,
      default: () => {
        return {};
      },
    },
    toolbarConfig: {
      type: Object,
      default: () => {
        return {};
      },
    },
    action: {
      type: String,
      default: ""
    },
    homeUrl() {
      return this.propsHttp.home || ''
    },
    mode: {
      type: String,
      default: ""
    }
  },
  computed: {
    resKey() {
      return this.propsHttp.res || this.propsHttpDefault.res;
    },
    homeUrl() {
      return this.propsHttp.home || ''
    },
    fileName() {
      return this.propsHttp.fileName || 'file'
    },
    uploadMaxConfig() {
      return {
        video: {
          size: startFileTools.fileSizeToBytes(this.videoMaxSize),
          label: "视频"
        },
        image: {
          size: startFileTools.fileSizeToBytes(this.imageMaxSize),
          label: "图片"
        },
        file: {
          size: startFileTools.fileSizeToBytes(this.fileMaxSize),
          label: '附件'
        },
      }
    }
  },
  watch: {
    disabled(val) {
      if (val) {
        this.editor.disable()
      } else {
        this.editor.enable()
      }
    },
  },
  data() {
    return {
      editor: null,
      editorFocus: false,

    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.editorConfig.readOnly = this.readonly || this.disabled
      this.editorConfig.placeholder = this.placeholder
      this.editorConfig.zIndex = 100
      this.editorConfig.MENU_CONF = this.editorConfig.MENU_CONF || {}
      this.editorConfig.MENU_CONF["uploadImage"] = {
        maxNumberOfFiles: 1,
        allowedFileTypes: ["image/*"],
        customUpload: (file, insertFn) => this.uploadFile(file, this.uploadMaxConfig.image, insertFn)
      }
      this.editorConfig.MENU_CONF["uploadVideo"] = {
        maxNumberOfFiles: 1,
        allowedFileTypes: ["video/*"],
        customUpload: (file, insertFn) => this.uploadFile(file, this.uploadMaxConfig.video, insertFn)
      }
      this.editorConfig.MENU_CONF["uploadAttachment"] = {
        maxNumberOfFiles: 1,
        customUpload: (file, insertFn) => this.uploadFile(file, this.uploadMaxConfig.file, insertFn)
      }
    },
    uploadFile(file, uploadMaxConfig, insertFn) {

      let message = "当前" + uploadMaxConfig.label + ":" + file.name + "大小" + startFileTools.formatFileSize(uploadMaxConfig.size);
      message += "\n"
      message += "当前文件大小：" + startFileTools.formatFileSize(file.size)
      if (file.size > uploadMaxConfig.size) {
        this.$message.error(message)
        return
      }
      let param = new FormData();
      param.append(this.fileName, file);
      const headers = Object.assign(this.headers, {"Content-Type": "multipart/form-data"});
      this.$axios.post(this.action, param, {headers}).then(res => {
        res = res || {}
        res = getAsVal(res.data, this.resKey);
        console.log("res", res)
      });

    },
    editorOnFocus() {
      this.editorFocus = true

      this.handleFocus(event);
    },
    editorOnBlur(event) {
      this.editorFocus = false

      this.handleBlur(event)
    },

    handleCreated(editor) {
      this.editor = editor
    },
  },
  beforeUnmount() {
    if (this.editor == null) return
    this.editor.destroy()
  }

}
</script>
<style class="scss">
.avue-wang-editor {

  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  border: 1px solid var(--el-input-border-color, var(--el-border-color));
  padding-bottom: 1px;
  padding-left: 1px;
  margin-top: 2px;
  margin-right: 4px;
  z-index: 9999;

  &.is-focus {
    border: 1px solid var(--el-color-primary);
  }
}
</style>
